<template>
	<view class="container">
		<u-navbar :border-bottom="false" placeholder title-color="#292940" :is-back="false" title="我的"
			:background="bgColor">
			<view class="d-flex justify-content-right" slot="right">
				<view class="setting-icon" @tap="toSetting">
					<image src="/static/mine/me-set.png"></image>
				</view>
			</view>
		</u-navbar>
		<view class="content-mine" v-if="USER">
			<view class="d-flex justify-content-between align-items-center">
				<view class="d-flex align-items-center" @tap="toSetting">
					<view class="avatar-img">
						<image :src="USER.avatar || $avatar" mode="aspectFill"></image>
					</view>
					<view>
						<view class="text-343A40 fz-36 font-weight-600 avatar-pb">{{USER.nickname}}</view>
						<view class="text-999CAA fz-26">UID:{{USER.id}}</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="position-relative" :class="{'shake':USER.airdrops_count > 0}" @tap="toPop">
					<view class="kongtou">
						<image src="/static/mine/kongtou.png"></image>
					</view>
					<u-badge class="badge-style" type="warning" :offset=[-14,-16] :count="USER.airdrops_count"></u-badge>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="position-relative" :class="{'shake':USER.airdrops_count > 0}" @click="openBox">
					<view class="kongtou">
						<image src="/static/mine/kongtou.png"></image>
					</view>
					<u-badge class="badge-style" type="warning" :offset=[-14,-16] :count="USER.airdrops_count"></u-badge>
				</view>
				<!-- #endif -->
			</view>
			<view class="wallet-card">
				<view class="card-link-box d-flex justify-content-between align-items-center">
					<view class="text-CCCDD5 fz-28 link">区块链地址: {{USER.address}}</view>
					<view class="copy" @click="copy(USER.address)">
						<image src="/static/mine/copy-icon.png"></image>
					</view>
				</view>
				<view class="card-box d-flex justify-content-between align-items-center">
					<view class="card-left d-flex align-items-center">
						<view class="card-icon">
							<image src="/static/mine/icon-wallet.png"></image>
						</view>
						<view>
							<view class="text-292940 fz-32 font-weight-600 card-pb">我的钱包</view>
							<view class="text-999CAA fz-22">已关联卡{{USER.wallet_count}}个</view>
						</view>
					</view>
					<view class="d-flex justify-content-end align-items-center" @tap="toWallet">
						<view class="text-999BA8 fz-24">进入钱包</view>
						<view class="wallet-more">
							<image src="/static/mine/wallet-more.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="d-flex justify-content-around align-items-center order-box">
				<view class="text-292940 fz-26 text-center" @tap="toOrder(1)">
					<view class="order-icon position-relative">
						<image src="/static/mine/wait-pay.png"></image>
						<u-badge class="badge-style" type="warning" :offset=[-20,-20] :count="waitCount"></u-badge>
					</view>
					<view class="">待付款</view>
				</view>
				<view class="text-292940 fz-26 text-center" @tap="toOrder(2)">
					<view class="order-icon position-relative">
						<image src="/static/mine/finish-pay.png"></image>
						<u-badge class="badge-style" type="warning" :offset=[-20,-20] count="0"></u-badge>
					</view>
					<view class="">已完成</view>
				</view>
				<view class="text-292940 fz-26 text-center" @tap="toOrder(3)">
					<view class="order-icon position-relative">
						<image src="/static/mine/cancel-pay.png"></image>
						<u-badge class="badge-style" type="warning" :offset=[-20,-20] count="0"></u-badge>
					</view>
					<view class="">已取消</view>
				</view>
				<view class="text-292940 fz-26 text-center" @tap="toOrder(0)">
					<view class="order-icon position-relative">
						<image src="/static/mine/all-pay.png"></image>
						<u-badge class="badge-style" type="warning" :offset=[-20,-20] count="0"></u-badge>
					</view>
					<view class="">我的订单</view>
				</view>
			</view>
			<view class="mine-list-box" @click="toSell">
				<view class="mine-list d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/sale-record.png"></image>
						<view class="text-292940 fz-30">出售记录</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
			</view>
			<view class="mine-list-box">
				<view class="mine-list d-flex justify-content-between align-items-center border" @click="toCreate" v-if="USER.is_official == 1">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/icon-me-creation.png"></image>
						<view class="text-292940 fz-30">创作</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center border" @tap="toCard" v-if="USER">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/icon-me-synthesis.png"></image>
						<view class="text-292940 fz-30">合成活动</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center border" @tap="toLive" v-if="USER">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/icon-me-synthesis.png"></image>
						<view class="text-292940 fz-30">开启直播</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center border" @tap="toVerified">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/me-certified.png" v-if="USER.status == 0"></image>
						<image class="me-icon" src="/static/mine/me-verified.png" v-else></image>
						<view class="text-292940 fz-30">我的认证</view>
					</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="text-292940 fz-30" v-if="USER.status == 0 && !USER.card_no">未认证</view>
						<view class="text-292940 fz-30" v-if="USER.status == 0 && USER.card_no">审核中</view>
						<view class="text-292940 fz-30" v-if="USER.status == 1">已认证</view>
						<image class="me-more" src="/static/mine/me-more.png"></image>
					</view>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center " @click="toAccount">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/me-Safety.png"></image>
						<view class="text-292940 fz-30">账号与安全</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
			</view>
			<view class="mine-list-box">
				<view class="mine-list d-flex justify-content-between align-items-center border" @click="toLine">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/me-service.png"></image>
						<view class="text-292940 fz-30">联系客服</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center border" @click="toInvite">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/me-share.png"></image>
						<view class="text-292940 fz-30">分享</view>
					</view>
					<image class="me-more" src="/static/mine/me-more.png"></image>
				</view>
				<view class="mine-list d-flex justify-content-between align-items-center ">
					<view class="d-flex align-items-center">
						<image class="me-icon" src="/static/mine/me-about.png"></image>
						<view class="text-292940 fz-30">关于Postrings+</view>
					</view>
					<view class="d-flex justify-content-end align-items-center" v-if="versionInfo">
						<view class="text-292940 fz-30">{{versionInfo.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="isBoxShow" mode="center" :mask-close-able="false">
			<view class="blind-box position-relative">
				<view class="fz-36 text-ffffff text-center gift-tip">您获得了一份空投</view>
				<view class="fz-28 text-ffffff text-center">拆开看看吧</view>
				<view class="gift-box-bg position-absolute" :class="{'big':isBig,'run':isRun}"></view>
				<view class="gift-box" :class="{'boxbig':isBoxShow}">
					<image src="/static/mine/kongtou-gift.png"></image>
				</view>
				<view class="popup-btn-box d-flex justify-content-between align-items-center" >
					<u-button shape="circle" hover-class="none" class="text-ffffff fz-32 btn-style popup-confirm-bg" :loading="openLoading" @click="airdrop">立即拆开</u-button>
				</view>
				<view class="close-icon mx-auto" @click="isBoxShow = false">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="boxShow" mode="center" :mask-close-able="false">
			<view class="gift-confirm-box position-relative">
				<view class="gift-confirm" v-if="airInfo">
					<view class="gift-title">
						<image src="/static/mine/gift-title.png"></image>
					</view>
					<view class="img-box">
						<view class="gift-confirm-img mx-auto">
							<image :src="airInfo.file" mode="aspectFill" v-if="airInfo.type == 1"></image>
							<image :src="airInfo.cover" mode="aspectFill" v-else></image>
								
							<text class="name" :class="{
								'fzz-26':airInfo.title.length > 12,
								'fzz-24':airInfo.title.length > 14,
								'fzz-22':airInfo.title.length > 18,
								'fzz-20':airInfo.title.length > 21}
							">{{airInfo.title}}</text>
						</view>
					</view>
					<view class="kongtou-gift-bottom">
						<image src="/static/mine/kongtou-gift-bottom.gif"></image>
					</view>
					<view class="popup-btn-box d-flex justify-content-center align-items-center">
						 <u-button type="text" class="text-ffffff fz-32  btn-style popup-confirm-bg" @click="toDetail">去藏品看看</u-button>
					</view> 
				</view>
				<view class="close-icon mx-auto" @click="closePopup">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="noBox" mode="center" :mask-close-able="false">
			<view class="no-box">
				<view class="title">提示</view>
				<view class="content">您没有收到空投~</view>
				<u-button class="btn" hover-class="none" @click="noBox = false">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: {
					background: 'rgba(255,255,255,1)'
				},
				versionInfo:null,
				isBoxShow:false,
				boxShow:false,
				openLoading:false,
				isBig:false,
				isRun:false,
			//	airInfo:null ,//空投作品详情
				airInfo:{
					color:'',type:'',title:''
				},//空投作品详情
				noBox:false,//无空投
				// todo 这个是临时写死的数据
				USER:{
					airdrops_count:1,nickname:"一只藏品",id:'237cbb',address:'24eowfd384023rc'
				}
			}
		},
		computed: {
			// USER() {
			// 	return this.$store.state.auth.USER
			// },
			walletList(){
				return this.$store.state.wallet.walletList
			},
			waitCount(){
				return this.$store.state.wallet.waitCount
			},
			isRefreshWaitCount(){
				return this.$store.state.wallet.isRefreshWaitCount
			}
		},
		onLoad() {
			this.getVersion()
		},
		onShow() {
			if(!this.USER){
				return uni.redirectTo({
					url:'/pages/login/login'
				})
			}
			if(this.isRefreshWaitCount){
				this.getOrdreList()
			}
		},
		watch:{
			isBoxShow(val){
				if(val){
					this.isBig = true
					setTimeout(()=>{
						this.isRun = true
					},1000)
				}else{
					this.isBig = false
					this.isRun = false
				}
			}
		},
		onPullDownRefresh() {
			this.getUser()
			this.getOrdreList()
		},
		methods: {
			//关闭空投
			closePopup(){
				this.boxShow = false
			},
			toPop(){
				if(this.USER.airdrops_count == 0){
					uni.navigateTo({
						url:'/pages/secondary/mine/popup?noBox=1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/secondary/mine/popup'
					})
				}
			},
			openBox(){
				console.log(this.airInfo)
				this.isBoxShow = true
					this.airInfo.cover = "/static/mine/kongtou-cover.png"
					this.airInfo.type = 3
				
					this.airInfo.title = '送你一个porstring碎片'
				
				// if(this.USER.airdrops_count == 0){
				// 	this.noBox = true
				// }else{
				// 	this.isBoxShow = true
				// 	this.airInfo = null
				// }
			},
			//领取空投
			airdrop(){
				console.log(this.airInfo)
				this.isBoxShow = false
				this.boxShow = true
				this.airInfo.cover = "/static/mine/kongtou-cover.png"
				this.airInfo.type = 3
				this.airInfo.title = '送你一个porstring碎片'
				// this.openLoading = true
				// this.$store.dispatch('user/airdrop').then(res=>{
				// 	this.openLoading = false
				// 	this.isBoxShow = false
				// 	this.boxShow = true
				// 	this.getUser()
				// 	this.airInfo = res.data.works
				// 	this.airInfo.no = res.data.user_works.no
				// 	this.airInfo.title = `${this.airInfo.name}#${this.airInfo.no}`
				// 	//刷新藏品列表
				// 	this.$store.commit('works/SET_ISREFRESH',true)
				// }).catch(error=>{
				// 	this.isBoxShow = false
				// 	this.openLoading = false
				// 	this.getUser()
				// })
			},
			//去藏品
			toDetail(){
				this.closePopup()
				uni.navigateTo({
					url:`/pages/secondary/collection/index?work_id=${this.airInfo.id}`
				})
			},
			toLine(){
				uni.navigateTo({
					url:'/pages/secondary/mine/online'
				})
			},
			getUser(){
				this.$store.dispatch('auth/user').then(res=>{
					uni.stopPullDownRefresh()
				}).catch(error=>{
					uni.stopPullDownRefresh()
				})
			},
			//获取版本
			getVersion(){
				this.$store.dispatch('public/version').then(res=>{
					this.versionInfo = res.data
				})
			},
			toInvite(){
				if(this.USER){
					uni.navigateTo({
						url:'/pages/secondary/home/invite'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			//前往账号安全
			toAccount(){
				uni.navigateTo({
					url:'/pages/setting/account-security'
				})
			},
			//出售记录
			toSell(){
				uni.navigateTo({
					url:'/pages/secondary/mine/sell-list'
				})
			},
			//获取订单
			getOrdreList(){
				this.$store.dispatch('wallet/order',{status:1}).then(res=>{
					this.$store.commit('wallet/SET_ISREFRESHWAITCOUNT',false)
					uni.stopPullDownRefresh()
				})
			},
			//前往创作
			toCreate(){
				uni.navigateTo({
					url:'/pages/secondary/mine/creation'
				})
			},
			//复制
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: (data)=> {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/index'
				})
			},
			toWallet() {
				uni.navigateTo({
					url: "/pages/secondary/mine/wallet"
				})
			},
			toVerified() {
				uni.navigateTo({
					url: '/pages/setting/verified'
				})
			},
			toLive(){
				uni.navigateTo({
					url: '/pages/setting/viewer'
				})
			},
			toOrder(current){
				uni.navigateTo({
					url:`/pages/secondary/mine/order-list?current=${current}`
				})
			},
			toCard(){
				uni.navigateTo({
					url:'/pages/secondary/card-list'
				})
			},
			close() {
				//this.count = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
		min-height: calc(100vh - 50px);
	}

	.setting-icon {
		height: 40upx;
		padding-right: 30upx;

		image {
			width: 44upx;
			height: 44upx;
			vertical-align: top;
		}
	}

	.content-mine {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		.shake{
			animation: buzz 1s linear infinite;
		}
		@keyframes buzz {
			0%{
				transform: translateX(-2px) rotate(-4deg);
			}
			50%{
				transform: translateX(2px) rotate(4deg);
			}
			100%{
				transform: translateX(-2px) rotate(-4deg);
			}
		}
		.avatar-img {
			width: 112upx;
			height: 112upx;
			margin: 0 24upx 0 8upx;

			image {
				width: 112upx;
				height: 112upx;
				border-radius: 100%;
			}
		}
		.avatar-pb {
			margin-bottom: 12upx;
		}
		.kongtou{
			width: 56upx;
			height: 80upx;
			margin-right: 6upx;
			image{
				width: 56upx;
				height: 80upx;
				vertical-align: top;
			}
		}
		.badge-style{
			background: #F5222D;
			border: 3upx solid #ffffff;
			min-width: 32upx;
			font-size:20upx !important;
			border-radius: 40upx 50upx 50upx 24upx;
			height: 32upx !important;
		}
		
	}

	.wallet-card {
		width: 100%;
		height: 246upx;
		margin-top: 38upx;
		margin-bottom: 20upx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF9 100%);
		box-shadow: 0px 10upx 20upx 0px rgba(154, 166, 219, 0.1);
		border-radius: 10upx;
		background-image: url(/static/mine/wallet-card.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.card-link-box {
			height: 93upx;
			width: 100%;
			padding: 0 28upx;
			box-sizing: border-box;

			.link {

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 87%;
			}

			.copy {
				width: 28upx;
				height: 28upx;

				image {
					width: 28upx;
					height: 28upx;
				}
			}
		}

		.card-box {
			height: 161upx;
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;

			.card-icon {
				width: 80upx;
				height: 80upx;
				margin-right: 19upx;
				border-radius: 100%;
				image {
					width: 80upx;
					height: 80upx;
				}
			}

			.card-pb {
				margin-bottom: 8upx;
			}

			.wallet-more {
				width: 28upx;
				height: 28upx;
				margin-left: 8upx;

				image {
					width: 28upx;
					height: 28upx;
				}
			}

		}

	}
	.order-box{
		width: 100%;
		height: 170upx;
		background: #FFFFFF;
		box-shadow: 0px 10upx 20upx 0px rgba(154,166,219,0.1);
		border-radius: 10upx;
		margin-bottom: 20upx;
		.order-icon{
			width: 48upx;
			height: 48upx;
			margin:0 auto 16upx;
			image{
				width: 48upx;
				height: 48upx;
			}
			.badge-style{
				background: #F5222D;
				border: 3upx solid #ffffff;
				min-width: 32upx;
				border-radius: 40upx 50upx 50upx 24upx;
				font-size:20upx !important;
				height: 32upx !important;
			}
		}
		
	}
	.mine-list-box {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 10upx 20upx 0px rgba(154, 166, 219, 0.1);
		border-radius: 10upx;
		margin-bottom: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;

		.mine-list {
			height: 116upx;

			.me-icon {
				width: 36upx;
				height: 36upx;
				margin-right: 10upx;
			}

			.me-more {
				width: 28upx;
				height: 28upx;
				margin-left: 12upx;
			}

		}

		.border {
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
		}
	}
	/deep/.u-mode-center-box {
		background: rgba(255, 255, 255, 0) !important;
	}
	/deep/.u-mask-show{
		background: rgba(000, 000, 000, 0.8) !important;
	}
	.blind-box {
		background: rgba(255, 255, 255, 0);
		width: 653upx;
		height: 970upx;
		.gift-tip{
			margin-bottom: 20upx;
		}
		.close-icon {
			width: 64upx;
			height: 64upx;
			
			image {
				width: 64upx;
				height: 64upx;
			}
		}
	}
	.gift-box-bg{
		width: 653upx;
		height: 653upx;
		background: url(/static/mine/gift-box-bg.png) no-repeat;
		background-size: 100% 100%;
		
	}
	.boxbig{
		animation: boxbig 1s linear 1;
	}
	.big{
		animation: big 1s linear 1;
	}
	.run{
		animation: rota 4s linear infinite;
	}
	@keyframes boxbig{
		0%{
			transform:  scale(0);
		}
		
		100%{
			transform:  scale(1);
		}
	}
	@keyframes big{
		0%{
			transform:  rotate(-90deg) scale(0);
		}
		
		100%{
			transform:  rotate(0deg) scale(1);
		}
	}
	@keyframes rota{
		0%{
			transform:  rotate(0deg) scale(1);
		}
		
		100%{
			transform:  rotate(360deg) scale(1);
		}
	}
	.gift-box {
		width: 524upx;
		height: 368upx;
		margin: 136upx auto 100upx;
		image {
			width: 525upx;
			height: 358upx;
		}
	}
	.gift-confirm-box {
		width: 690upx;
		.gift-confirm {
			width: 690upx;
			.gift-title{
				width: 479upx;
				height: 86upx;
				margin:0 auto 50upx;
				margin-bottom: 550upx;
				image{
					width: 479upx;
					height: 86upx;
					vertical-align: top;
				}
			}
			.img-box{
				width: 480upx;
				height: 550upx;
				background:linear-gradient(90deg, rgba(105, 22, 255, 1), rgba(10, 255, 255, 1));
				padding: 6upx;
				border-radius: 14upx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				z-index: 9;
				top: 94upx;
			}
			.gift-confirm-img {
				position: relative;
				width: 100%;
				height: 100%;
				padding: 8upx;
				padding: 18upx 18upx 0 18upx;
				border-radius: 14upx;
				background: #000000;
				z-index: 10 !important;
				overflow: hidden;
				text-align: center;
				image {
					width: 100%;
					height: 440upx;
					border-radius: 10upx;
				}
				.name{
					color: #00FEFF;
					font-size: 30upx;
					font-family: 'PFSC';
					display: inline-block;
					margin-top: 14upx;
				}
				.fzz-26{
					font-size: 26upx;
				}
				.fzz-24{
					font-size: 24upx;
				}
				.fzz-22{
					font-size: 22upx;
				}
				.fzz-20{
					font-size: 20upx;
				}
				.fzz-18{
					font-size: 18upx;
				}
			}
			.kongtou-gift-bottom{
				width: 690upx;
				height: 226upx;
				margin-top: -80upx;
				z-index: 2 !important;
				margin-bottom: 60upx;
				image{
					width: 690upx;
					height: 226upx;
					vertical-align: top;
				}
			}
		}
	
		.close-icon {
			width: 64upx;
			height: 64upx;
			image {
				width: 64upx;
				height: 64upx;
			}
		}
	}
	.popup-btn-box {
		margin-bottom: 100upx;
		.btn-style {
			width: 340upx;
			height: 88upx;
			border-radius: 49upx;
		}
	}
	
	.popup-confirm-bg {
		background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
	}
	
	.no-box{
		width: 640upx;
		height: 400upx;
		background: url(/static/mine/wallet-popup-bg.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #292940;
		padding-top: 80upx;
		.title{
			font-size: 36upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}
		.content{
			font-size: 30upx;
			margin-bottom: 50upx;
		}
		.btn{
			width: 560upx;
			height: 90upx;
			border-radius: 45upx;
			background: linear-gradient(134deg, #7A60FF 0%, #1EF7FE 100%);
			font-size: 32upx;
			color: #ffffff;
		}
	}
</style>
